import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import type { WechatRechargeRecordTableItem } from './types';
import { queryWechatRecharges } from './service';
import { useModel } from 'umi';
import { Auths } from '@/utils/types.d';
import UpdateRechargeRecords from './components/UpdateRechargeRecords';
import PlaceHolderCpn from '@/components/PlaceHolderCpn';

export default () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const auths = currUser?.auth ? new Set(currUser.auth.wechatUser || []) : new Set();
  const ifModify = auths.has(Auths.RECHARGE_MODIFY);
  const columns: ProColumns<WechatRechargeRecordTableItem>[] = [
    {
      title: 'id',
      hideInTable: true,
      hideInForm: true,
      hideInSearch: true,
      dataIndex: '_id',
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '微信支付单号',
      dataIndex: 'payNo',
      hideInTable: true,
      hideInForm: true,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '金额',
      dataIndex: 'amount',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'money',
      renderText: (text) => text / 100,
    },
    {
      title: '充值时间',
      dataIndex: 'rechargeTime',
      valueType: 'dateTime',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '充值状态',
      dataIndex: 'rechargeStatus',
      align: 'center',
      valueEnum: {
        1: { text: '成功' },
        2: { text: '失败' },
      },
    },
    {
      title: '发票状态',
      dataIndex: 'invoiceStatus',
      align: 'center',
      valueEnum: {
        1: { text: '已开' },
        2: { text: '未开' },
      },
    },
    {
      title: '操作',
      align: 'center',
      key: 'option',
      fixed: 'right',
      valueType: 'option',
      render: (_, record, x, action) => [
        ifModify ? (
          <UpdateRechargeRecords func={() => action?.reload()} record={record} />
        ) : (
          <PlaceHolderCpn />
        ),
      ],
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '微信用户充值记录',
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/wechat',
              breadcrumbName: '微信用户',
            },
            {
              path: '/wechat/recharges',
              breadcrumbName: '充值记录',
            },
          ],
        },
      }}
    >
      <ProTable<WechatRechargeRecordTableItem>
        columns={columns}
        rowKey="orderNo"
        search={{
          labelWidth: 'auto',
        }}
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryWechatRecharges(param, sort);
          return res;
        }}
      />
    </PageHeaderWrapper>
  );
};
